<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.body {
			margin: 0;
			padding: 0;

		}

		.content {
			width: 100%;
			height: 100%;
			position: fixed;
			/* background-color: black; */
		}

		.airplane {
			width: 200px;
			height: 120px;
			background: url(img/airplane.png) no-repeat;
			background-size: 100%;
			position: absolute;
			right: -200px;

		}
		.feiji{
			width: 200px;
			height: 120px;
			background: url(img/飞机.png) no-repeat;
			background-size: 100%;
			position: absolute;
			right: -180px;
		}
		.rocket {
			width: 250px;
			height: 350px;
			background: url(img/rocket.png) no-repeat;
			background-size: 100%;
			position: absolute;
			left: 300px;
			top: 200px;
			opacity: 0;
		}

		.bomb {
			width: 250px;
			height: 350px;
			background: url(img/bomb1.png) no-repeat;
			background-size: 100%;
			position: relative;
			left: 400px;
			top: 0px;
			opacity: 0;
		}

		.bomb1 {
			width: 100px;
			height: 100px;
			background: url(img/bomb.png) no-repeat;
			background-size: 100%;
			position: absolute;
			top: 80px;
			left: 435px;
			/* top:100px;
			left: -50px; */
			opacity: 0;
		}

		.fire {
			width: 150px;
			height: 150px;
			background: url(img/fire.png) no-repeat;
			background-size: 100%;
			position: absolute;
			top: 160px;
			left: 400px;
			opacity: 0;
		}

		@keyframes airplane_run {
			0 {

				right: -200px;
			}

			40%,
			60% {
				right: 45%;
			}

			100% {
				right: 120%;
			}
		}

		@keyframes rocket_run {
			0 {

				top: 200px;
			}

			30% {
				opacity: 1;
			}

			100% {

				top: -500px;
			}
		}

		@keyframes bomb_run {
			0% {

				top: 80px;
				left: 435px;
				opacity: 0;
			}

			100% {

				top: 160px;
				left: 400px;
				opacity: 1;
			}
		}
	</style>
	<script>
		$(function() {
			// 飞机动画
			$('.btn').click(function() {
				let feiji_bgm = document.getElementById("music");
				feiji_bgm.load()//重头开始
				feiji_bgm.play()
				
				$(".airplane").css({
					'animation': 'airplane_run 3s linear',
					'animation-delay': 1 + 's'
				})
				setTimeout(() => {
					$(".feiji").animate({
						top:"400px"
						
					},1000,function(){
						$(".feiji").animate({
							top:"0px"
						},1000)
					}) 
					
				}, 2000)
				
				setTimeout(() => {
					$(".airplane").css({
						'animation': '',
						'animation-delay': ''
					}) //删除动画效果
					feiji_bgm.pause()
				}, 4000)

			})
			//火箭动画
			$('.cbtn').click(function() {
				let rocket_bgm = document.getElementById("rmusic");
				rocket_bgm.load()
				rocket_bgm.play()
				$(".rocket").css({
					'animation': 'rocket_run 2s linear',
					'animation-delay': 1 + 's'
				})
				setTimeout(() => {
					$(".rocket").css({
						'animation': '',
						'animation-delay': ''
					}) //删除动画效果
					rocket_bgm.pause()
				}, 3000)

			})
			// 炸弹动画
			$('.bbtn').click(function() {
				$(".bomb").animate({
					opacity: "1",

				}, 400, function() {
					$(".bomb").css({
						background: "url(img/bomb2.png) no-repeat",
						backgroundSize: "100%"
					})
				})
				let bomb_bgm = document.getElementById("bmusic");
				bomb_bgm.load();
				$(".bomb1").css({
					'animation': 'bomb_run 0.2s linear forwards',
					'animation-delay': 0.5 + 's',
				})

				setTimeout(() => {
					bomb_bgm.play();
					$(".bomb1").css({
						'animation': '',
						'animation-delay': ''
					}) //删除动画效果	
					$(".bomb").animate({
						opacity: "0"
					})
					$(".fire").animate({
						opacity: "1"

					}, 1000, function() {
						$(".fire").animate({
							opacity: "0"

						}, 500)
					})

				}, 700)
				bomb_bgm.pause();
				$(".bomb").css({
					background: "url(img/bomb1.png) no-repeat",
					backgroundSize: "100%"
				})
			})
		})
	</script>
	<body>
		<div class="content">
			<audio id="music" src="video/airplane.mp3"></audio>
			<button class="btn">
				飞机
			</button>
			<button class="cbtn">
				<audio id="rmusic" src="video/rocket.mp3"></audio>
				火箭
			</button>
			<button class="bbtn">
				<audio id="bmusic" src="video/bomb.mp3"></audio>
				炸弹
			</button>
			<div class="airplane">
			    <div class="feiji"></div>
			</div>
			<div class="rocket"></div>
			<div class="bomb">
				<!-- <img  src="img/bomb.png"/> -->
			</div>
			<div class="bomb1"></div>
			<div class="fire"></div>
		</div>

	</body>
</html>
